<template>
    <view class="yiyuceping">
      <view class="cepingjindu">
        <p class="p1">测评进度</p>
        <view class="jindutiao">
          <view class="jindu">
            <view class="tiao" :style="{ width: width1 }"></view>
          </view>
          <p class="p2">{{ n }} / {{ question.length-1 }}</p>
        </view>
      </view>
      <view class="questions">
        <p class="p5">{{ question[n]?.topic }}</p>
      </view>
      <view class="question">
        <view class="head">
          <view class="fangkuai"></view>
          <p class="p3">单选题</p>
        </view>
        <view
          class="item"
          @click="xiayiti(item.son_id)"
          v-for="(item, index) in question[n]?.options"
          :key="index"
        >
          <p class="p4">{{ item.title }}</p>
        </view>
      </view>
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from "vue";
  import { api } from "../../api/api";
  import type { questionT } from "../../types/type";
  const n = ref<number>(0);
  const sonId = ref([]);
  // 获取数据
  const question = ref<questionT[]>([]);
  onMounted(async () => {
    // 发送请求
    const res: any = await api.insomnia_topics();
    question.value = res.data;
  });
  const width = ref<number>(0);
  const width1 = ref<string>("");
  const xiayiti = (son_id: string) => {
    if (n.value < question.value.length-1) {
      n.value++;
      sonId.value.push(son_id);
      width.value = width.value + 73;
    } else {
      uni.navigateTo({
        url: "/pages/shimiancepingjieguo/shimiancepingjieguo" + "?arr=" + sonId.value,
      });
    }
    width1.value = width.value + "rpx";
  };
  </script>
  
  <style lang="scss" scoped>
  .yiyuceping {
    width: 100vw;
    height: 100vh;
    background-color: #d6e8ff;
    overflow: hidden;
    padding: 0 20rpx;
    box-sizing: border-box;
    .tiao {
      width: 0;
      background-color: #0d7cff;
      height: 25rpx;
      border-radius: 20rpx;
    }
    .questions {
      width: 100%;
      line-height: 80rpx;
      border-radius: 15rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      margin: 20rpx 0;
    }
    .item {
      margin: 20rpx 0;
      line-height: 120rpx;
      border-radius: 15rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      background-color: #fff;
    }
    .cepingjindu {
      display: flex;
      align-items: center;
  
      margin: 20rpx 0;
    }
    .p1 {
      margin-right: 20rpx;
    }
    .jindutiao {
      display: flex;
      align-items: center;
    }
    .jindu {
      width: 444rpx;
      height: 25rpx;
      background-color: #ebebeb;
      border-radius: 40rpx;
    }
    .question {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #f3f8ff;
      border-radius: 20rpx;
      .head {
        display: flex;
        align-items: center;
        .fangkuai {
          width: 10rpx;
          height: 30rpx;
          background-color: #0d7cff;
          margin-right: 30rpx;
        }
      }
    }
  }
  </style>
  